<input type = "hidden" id="company_id" value = "<?=$company->id?>" />
<div class="review-rw row" style="margin-top:5rem;">
	<div class="review-cn medium-10 medium-centered large-10 column">
		<div class="review-wp large-12 column" data-equalizer>

			<div class="text-center review-dp medium-4 large-4 column" data-equalizer-watch>
				<div class="text-left img large-12 column" style="background:url(<?= IMAGE_URL_SMALL.$company->profile_pic?>);background-size:cover;">
				</div>

				<div class="text-center large-12 column" style="margin-top:1rem;">
					<div id="companyrating" data-average="<?=$average_rating?>" data-id="3" style="margin:0 auto;"></div>
					<small>Rating</small> 
				</div>

				<h3><strong><?= $company->name ?></strong></h3>
				<p><i class="fa fa-map-marker"></i>&nbsp;&nbsp; <a href="">Makati City</a></p>	
			</div>

			<div class="review-i medium-8 large-8 column" data-equalizer-watch>
			<h5 class="text-center not_verified" style="color:gray;" ></h5>
				<div class="i-btn large-12 column for_validation">
					<p>About <a data-reveal-id="suggestedits"><small>[ Edit ]</small></a>
					
					<?php if(!$is_followed){ ?> 
					<a class="right tiny radius button btnFollowCompany to_hide" company_id="<?=$company_id?>">Follow</a></p> 
					<?php } else { ?>
					<a class="right tiny radius button btnUnFollowCompany to_hide" company_id="<?=$company_id?>">Unfollow</a></p> 
					<?php } ?>
				</div>
				<div class="i-p large-12 column for_validation">
					<p><?php if($company->about){echo $company->about;}else{ echo "Add description here";} ?></p>
				</div>
				<div class="i-3s large-12 column for_validation">
					<div class="medium-4 large-4 column" style="padding:0;">
						<div class="i-left medium-4 large-4 column" style="padding:0;">
							<img class="rip" src="<?= BASE_URI?>img/icons/CompanyFollowersIcon.png">
						</div>
						<div class="i-right medium-8 large-8 column" style="padding:0;">
							<p class="text-center i-count"><?=$total_followers?></p>
							<p class="text-center i-label">Followers</p>
						</div>
					</div>
					<div class="medium-4 large-4 column" style="padding:0;">
						<div class="i-left medium-4 large-4 column" style="padding:0;">
							<img class="rip" src="<?= BASE_URI?>img/icons/CompanyReviewIcon.png">
						</div>
						<div class="i-right medium-8 large-8 column" style="padding:0;">
							<p class="text-center i-count"><?=$total_reviews?></p>
							<p class="text-center i-label">Reviews</p>
						</div>
					</div>
					<div class="medium-4 large-4 column" style="padding:0;">
						<div class="i-left medium-4 large-4 column" style="padding:0;">
							<img src="<?= BASE_URI?>img/icons/CompanyEmployeeIcon.png">
						</div>
						<div class="i-right medium-8 large-8 column" style="padding:0;">
							<p class="text-center i-count"><?=$total_workers?></p>
							<p class="text-center i-label">Workers</p>
						</div>
					</div>
				</div>
				<div class="medium-7 large-7 column end" style="padding:0;margin-top:1.9rem;position:absolute;bottom:0;">
					<p style="line-height:10px;"><small>This page is automatically generrated based on what Behomebased.ph users are interested in and not affiliated with or endorsed by anyone associated with the topic.</small></p>
				</div>
			</div>
			
		</div>
	</div>
</div>

<div class="review-bt row for_validation">
	<div class="review-cn medium-10 medium-centered large-10 column">

		<div class="review-feeds medium-8 large-8 column">

			<div class="rev-wp large-12 column" >
				<div class="review-head large-12 column">
					<ul class="inline-list">
						<li><span><a class ="btnPostReview" data-reveal-id="reviewmodal"><img src="<?= BASE_URI ?>img/icons/chat.png">Rate this company &nbsp;&nbsp;&nbsp;&nbsp;<strong>|</strong></a></span></li>
						<li><span><a data-reveal-id="PostJob"><img src="<?= BASE_URI ?>img/icons/job.png">Job Post</a></span></li>
					</ul>
					<hr>
				</div>
				<div class="review-form large-12 column">
					<textarea class="textarea-xpnd txtReview" placeholder="Write your review here"></textarea>
				</div>
				<div class="btn large-12 column" style="border-top:solid 1px #DFE0E4;">
					<a href="" class="right radius button" data-reveal-id="reviewmodal">Post</a>
				</div>
			</div>

			<div class="rev-fil large-12 column">
			<div class="medium-4 large-4 column" style="padding:0;">
				<select>
					<option>Top Reviews</option>
				</select>
			</div>
			<div class="medium-2 large-2 column end">
				<a href="" class="radius expand button">Filter</a>
			</div>
			</div>


<!--			<div class="rev-wl large-12 column">

				<div class="rev-wl-head large-12 column">
					<div class="rev-img medium-1 large-1 column" style="background:url(<?= BASE_URI ?>img/user_dp/steve.jpg);background-size:cover;"></div>
					<div class="medium-10 large-11 end column">
						<div class="medium-10 column" style="padding:0;">
							<a href="">Critine Mae <span>posted new job</span></a><span class="link"><a> Php Web Develper</a></span>
							<p><i class="fa fa-clock-o"><small>&nbsp;&nbsp;3 miunutes ago</small></i></p>							
						</div>
						<div class="text-right medium-2 column" style="padding:0;"><a>Report</a></div>
					</div>
				</div>

				<div class="rev-p large-12 column" style="padding:0;">
					<div class="medium-12 column">
						<p>Remotestaff is currently looking for php web developer with a minimum of 2 year experience. Click the link to view full details.</p>						
					</div>
					<div class="user-info-more large-12 column" style="margin-bottom:1rem;">
						<a style="color:#3d3d3d;">Skills: &nbsp;</a>
						<a><span class="radius label">Php</span></a>
						<a><span class="radius label">HTML</span></a>
					</div>
				</div>
			</div> -->
		<div id="reviewContainer">
		<?php foreach ($reviews as $review) { ?>
			<div class="rev-wl large-12 column">
				<div class="rev-wl-head large-12 column">
					<div class="rev-img medium-1 large-1 column" style="background:url(<?=IMAGE_URL_SMALL.$review->profile_pic?>);background-size:cover;"></div>
					<div class="medium-10 large-11 end column">
						<div class="medium-10 column" style="padding:0;">
							<a href="<?=BASE_URI?>profile?bhd=<?=$review->user_id?>"><?=$review->fullname?></a>
							<div class="user-rating" data-average="<?=$review->rate?>" data-id="1" style="margin:0;"></div>
							<p><i class="fa fa-clock-o"><large> <abbr class="timeago" title="<?=$review->date_created?>"></abbr></large></i></p>		
						</div>
						<div class="text-right medium-2 column" style="padding:0;">
							<a href="">Report</a>
						</div>
					</div>
				</div>

				<div class="rev-p large-12 column">
					<p><?=$review->reviews?></p>
				</div>
			</div>
		<?php } ?>
		</div>


	
		</div>

		<div class="review-side medium-4 large-4 column" style="padding-right:0;">
			<div class="large-12 column">
				<!-- <div class="datasSent">
					Datas sent to the server :
					<p></p>
				</div>
				<div class="serverResponse">
					Server response :
					<p></p>
				</div>
				-->
				<input type="hidden" id="txtRate" type = "text" />
			</div>
			<div class="geo-loc large-12 column">
				<div class="geo-head large-12 column"><p>Office Location</p></div>

				<div id="map-canvas" class="text-center geo-mp large-12 column" style="background:gray;">
                   <!--Map Location-->
				</div>
			</div>


		</div>
	</div>
</div>
<?php $this->view->partial('common/change_dp'); ?>
<div id="reviewmodals">
<?php $this->view->partial('common/review_modal'); ?>
</div>


<script type="text/javascript">
  $(document).ready(function(){
		$("#companyrating").jRating({
		  isDisabled : true,
		  length : 5, // nb of stars
		  decimalLength:1 // number of decimal in the rate
		});

		$('.user-rating').jRating({
		  		isDisabled : true,
				type:'small',
				length : 5,
				decimalLength : 1,
		});
  });
</script>

<script type="text/javascript">
	$(function(){
		var is_verified = "<?php echo $is_verified; ?>";
		if(is_verified == "false"){
			$('.for_validation').hide();
			$('.to_hide').hide();
			$('.not_verified').html('This company is still on the process of verification.');
		}else if(is_verified == "true"){
			$('.not_verified').html('');
		}

		function followCompany(company_id)
		{
			var params = {};
			params.company_id = company_id;
			return $.ajax({
				url: URL + 'reviews/follow',
				type: 'post',
				data: params,
				dataType: 'json'
			});	
		}
		function UnfollowCompany(company_id)
		{
			var params = {};
			params.company_id = company_id;
			return $.ajax({
				url: URL + 'reviews/unfollow',
				type: 'post',
				data: params,
				dataType: 'json'
			});	
		}
		function addToList(data)
		{
			var container = $('#reviewContainer');
			var template = $('#reviewsTpl').html();
			var html = Mustache.to_html(template,data);
			$(html).prependTo('#reviewContainer').hide().fadeIn('slow');
			jQuery("abbr.timeago").timeago();

				$('.user-rating').jRating({
			  		isDisabled : true,
					type:'small',
					length : 5,
					decimalLength : 1,
				});
		}
		function addReview(rate,reviews,company_id){
			var params = {};
			params.rate = rate;
			params.reviews = reviews;
			params.company_id = company_id;

			return $.ajax({
				url: URL + 'reviews/create',
				type: 'post',
				dataType: 'json',
				data: params
			});
		}

		var $txtReview = $('.txtReview');
		var $txtYourReview = $('.txtYourReview');
		var $btnSaveReview = $('.btnSaveReview');
		var $btnFollow = $('.btnFollowCompany');

		$(document).ready(function(){
			
			jQuery("abbr.timeago").timeago();
			$(document).on('click','.btnPostReview',function(){
				var review = $txtReview.val();
				$('#txtYourReview').val('');

				$("#reviewRating").jRating({
				  isDisabled : false,
				  step:true,
				  length : 5,
				  canRateAgain : true,
				  nbRates : 10
				});
			
			});
			
			$(document).on('click','.btnFollowCompany',function(){
				
				if($(this).html() != 'Follow'){
					return false;
				}
				var company_id = $(this).attr('company_id');
			
				$(this).html("Processing <img src='<?=BASE_URI?>img/loading2.gif'/>");
				var curr = $(this);
				followCompany(company_id).done(function(result){
				
					if(result.status){
						curr.removeClass('btnFollowCompany').addClass('btnUnFollowCompany').html('Unfollow');
					}else{
						alert("There is a problem saving your request");
					}
				});
			

			});
			$(document).on('click','.btnUnFollowCompany',function(){
				
				if($(this).html() != 'Unfollow'){
					return false;
				}
				var company_id = $(this).attr('company_id');
			
				$(this).html("Processing <img src='<?=BASE_URI?>img/loading2.gif'/>");
				var curr = $(this);
				UnfollowCompany(company_id).done(function(result){
				

					if(result.status){
						curr.removeClass('btnUnFollowCompany').addClass('btnFollowCompany').html('Follow');
					}else{
						alert("There is a problem saving your request");
					}
				});
			
			});
			
			$(document).on('click','.btnSaveReview',function(){
				var rate = $('#txtRate').val();
				var review = $('#txtYourReview').val()
				var company_id = $('#company_id').val();
				$(this).html('<span id="uploading"><img src="<?= BASE_URI ?>img/loading2.gif"/> Processing  </span>');
				addReview(rate,review,company_id).done(function(result){
					if(result.status == true)
					{
						addToList(result.data);
						$('.btnSaveReview').html('Your review has been sent');
						$('#reviewmodal').foundation('reveal', 'close');
					}
					else
					{
						alert(result.messages);
					}
					$('.btnSaveReview').html('Save');
					$('#txtRate').val('');
					$('#txtYourReview').val('');
				});
			});

			var pusher = new Pusher(PUSHER_APP_KEY);
			var channel = pusher.subscribe('company-channel');
			
			channel.bind('added-review', function(data) {
				if(SS_USER_ID != data.user_id){
					addToList(data);
				}
			});
		});
	});

</script>

<script type="text/template" id="reviewsTpl">
<div class="rev-wl large-12 column">
		<div class="rev-wl-head large-12 column">
			<div class="rev-img medium-1 large-1 column" style="background:url(<?=IMAGE_URL_SMALL?>{{profile_pic}});background-size:cover;"></div>
			<div class="medium-10 large-11 end column">
				<div class="medium-10 column" style="padding:0;">
					<a href="<?=BASE_URI?>profile?bhd={{user_id}}">{{fullname}}</a>
					<div class="user-rating" data-average="{{rate}}" data-id="1" style="margin:0;"></div>
					<p><i class="fa fa-clock-o"><large> <abbr class="timeago" title="{{date_created}}"></abbr></large></i></p>		
				</div>
				<div class="text-right medium-2 column" style="padding:0;">
					<a href="">Report</a>
				</div>
			</div>
		</div>

		<div class="rev-p large-12 column">
			<p>{{reviews}}</p>
		</div>
</div>
</script>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script>

var map1;
var geocoder;
var map;
var autocomplete;
var markers = [];

//Company Location Map on company page
function loadmap() { 
		  // Create an array of styles.
		  var styles = [
		  				{stylers: [{ hue: "#006652" },{ saturation: -20 }]},
		  				{featureType: "road", elementType: "geometry",stylers:[{ lightness: 30 },{ visibility: "simplified" }] },
		  				{featureType: "road",elementType: "labels"}
		  			   ];

		  var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
		  var myLatlng = new google.maps.LatLng(14.586902, 120.98570599999994);
		  var mapOptions = {zoom: 14,center: myLatlng,mapTypeControlOptions: {
		     				mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
		                   }};
		  map1 = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
		  map1.mapTypes.set('map_style', styledMap);
		  map1.setMapTypeId('map_style');
		  addMarker();
		}

function addMarker() {
		  var position = new google.maps.LatLng(14.586902, 120.98570599999994);
		  var marker = new google.maps.Marker({
		    position: position,
		    map: map1, 
		    icon: URL + 'img/icons/Marker.png',
		    draggable: false,
		    animation: google.maps.Animation.DROP
		  });
		}

//Map and autocomplete on suggest edit modal
 function initialize() {
      document.getElementById("latlng").value="";
      document.getElementById("address").value="";
      document.getElementById("string").value="";
      document.getElementById("city").value="";
      // Create an array of styles.
      var styles = [
              {stylers: [{ hue: "#006652" },{ saturation: -20 }]},
              {featureType: "road", elementType: "geometry",stylers:[{ lightness: 30 },{ visibility: "simplified" }] },
              {featureType: "road",elementType: "labels"}
               ];
      var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
      var myLatlng = new google.maps.LatLng(14.586902, 120.98570599999994);
      var mapOptions = {zoom: 16,center: myLatlng,mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                       }};
      geocoder = new google.maps.Geocoder();

      map = new google.maps.Map(document.getElementById('modal-canvas'), mapOptions);
      map.mapTypes.set('map_style', styledMap);
      map.setMapTypeId('map_style');
      //Search Box location restriction       
      var input = document.getElementById('address');
      var options = {
        componentRestrictions: { country: 'ph' }
    };
    //Autocomplete function
      autocomplete = new google.maps.places.Autocomplete(input, options);
      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        codeAddress(); 
    });
    }

function codeAddress(AddressToPoints) {
  var iconBase = 'behomebased-ph/Design/Final/Photos/Icon';
  var address = document.getElementById('address').value;
   geocoder.geocode( { 'address': address, 'componentRestrictions':{'country':'ph'}}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            icon: URL + 'img/icons/Marker.png',
            position: results[0].geometry.location,
            draggable:true,
        });

        markers.push(marker);

        var coordinates = marker.getPosition();
        coordinates1 = coordinates.toString();
        coordinates2 = coordinates1.substring(1, coordinates1.length-1);
        document.getElementById("latlng").value = coordinates2; 
        document.getElementById("latlng").focus();    
      
        google.maps.event.addListener(marker, 'dragend', function() {
        var coordinates = marker.getPosition();
        coordinates1 = coordinates.toString();
        coordinates2 = coordinates1.substring(1, coordinates1.length-1);
        document.getElementById("latlng").value = coordinates2;  
        document.getElementById("latlng").focus(); 
        map.setCenter(coordinates);   

        setTimeout(get, 230);

        function get(){
            document.getElementById('address').value = document.getElementById('string').value;
            }
          setTimeout(get, 230);
      });

      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }

function setAllMap(map) {
    for (var i = 0; i < markers.length; i++) {
      markers[i].setMap(map);
    }
  }
  // Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setAllMap(null);
  }

function deleteMarkers() {
    clearMarkers();
    markers = [];
  }

function codeLatLng(PointsToAddress) {
    var input = document.getElementById('latlng').value;
    var latlngStr = input.split(',', 2);
    var lat = parseFloat(latlngStr[0]);
    var lng = parseFloat(latlngStr[1]);
    
    var latlng = new google.maps.LatLng(lat, lng);
    var string;
 
    geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {

          for (var j=0; j<results.length; j++)
          {

          for (var i=0; i<results[j].address_components.length; i++)
              {
                  if (results[j].address_components[i].types[0] == "locality") {
                          //this is the object you are looking for
                          city = results[j].address_components[i];
                      }
              }
            }

      string = (results[0].formatted_address);
      document.getElementById("string").value = string;
      document.getElementById("city").value =  city.long_name;

      var city_name = city.long_name;
      var length = city_name.length;

      if (city_name.substr(-4, 4) == "City")
          {
            document.getElementById("city").value = city_name.substr(0, length-5);
          }

          else if (city_name.substr(0,7) == "City of")
            {
            document.getElementById("city").value = city_name.substr(8,length);
            }
            
             else { 
             }

          } 
          else {
            alert('No results found');
          }       
      } 
      else {
      }
    });
  }

function cleartext(){
    document.getElementById("address").value="";
    document.getElementById("latlng").value="";
    document.getElementById("string").value="";
    document.getElementById("city").value="";
    deleteMarkers();
  }
   google.maps.event.addDomListener(window, 'load', loadmap); 
</script>

